*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: black;
}
.mian{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    filter: brightness(300%);
    overflow: hidden;
}
span.text{
    display: block;
    color: white;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10rem;
    font-weight: bold;
    background: black;
    
}
span.text::before{
    content: "王者荣耀";
    /* content:"夜空高树几许悠，风吹花落送忧愁。缘分不及酒杯深，思念难抵海水浅。"; */
    position: absolute;
    /* 混合模式让文字完全被遮盖 */
    mix-blend-mode: difference;
    /* 因为blur的滤镜模糊化效果会降低亮度，因此可以利用brihtness（）滤镜 把亮度提高*/
    filter: blur(2px);
}
/* 下面继续给空心文字加上过渡背景，还是利用混合滤镜的方式 */
span .back{
    background: linear-gradient(#0984e3, #74b9ff, #e056fd,#487eb0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}
span.shine{
    background: radial-gradient(circle,white,black 35%) center / 25% 25%;
    position: absolute;
    top: -100%;
    left: -100%;
    right: 0;
    bottom: 0;
    mix-blend-mode: color-dodge;
    animation: animate 4s linear infinite;
}
@keyframes animate {
    100%{
        transform: translate(50%,50%);
    }
}



